<!doctype html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Daxone - eCommerce Bootstrap 4 Template</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon.png">

    <!-- CSS
	============================================ -->
    <!--layui CSS-->
    <link rel="stylesheet" href="/assets/layui/css/layui.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/assets/css/vendor/bootstrap.min.css">
    <!-- Icon Font CSS -->
    <link rel="stylesheet" href="/assets/css/vendor/line-awesome.css">
    <link rel="stylesheet" href="/assets/css/vendor/themify.css">
    <!-- othres CSS -->
    <link rel="stylesheet" href="/assets/css/plugins/animate.css">
    <link rel="stylesheet" href="/assets/css/plugins/owl-carousel.css">
    <link rel="stylesheet" href="/assets/css/plugins/slick.css">
    <link rel="stylesheet" href="/assets/css/plugins/magnific-popup.css">
    <link rel="stylesheet" href="/assets/css/plugins/jquery-ui.css">
    <link rel="stylesheet" href="/assets/css/style.css">
    <!-- 商品详情style css -->
    <!-- bootstrap v4.0.0 -->
    <link rel="stylesheet" href="/assets/productscriptioncss/bootstrap.min.css">

<!--    &lt;!&ndash; helper css &ndash;&gt;-->
<!--    <link rel="stylesheet" href="assets/productscriptioncss/helper.css">-->
    <!-- style css -->
    <link rel="stylesheet" href="/assets/productscriptioncss/style.css">

	<script src="/assets/js/vendor/modernizr-2.8.3.min.js"></script>


	
	<style type="text/css">
		h1{font-family:"微软雅黑";font-size:40px;margin:20px 0;;border-bottom:solid 1px #ccc;padding-bottom:20px;letter-spacing:2px;}

		.time-item strong{background:#C71C60;color:#fff;line-height:46px;font-size:30px;font-family:Arial;padding:0 10px;margin-right:10px;border-radius:5px;box-shadow:1px 1px 3px rgba(0,0,0,0.2);}

		.item-title .unit{background:none;line-height:49px;font-size:24px;padding:0 10px;float:left;}

    /*  喇叭  */
        .marquee {
            width: 450px;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            animation: marquee 50s linear infinite;
        }

        .marquee:hover {
            animation-play-state: paused
        }

        /* Make it move */
        @keyframes marquee {
            0%   { text-indent: 27.5em }
            100% { text-indent: -105em }
        }

        /* Make it pretty */
        .microsoft {
            padding-left: 1.5em;
            position: relative;
            font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
        }

        /* ::before was :before before ::before was ::before - kthx */
        .microsoft:before, .microsoft::before {
            z-index: 2;
            content: '';
            position: absolute;
            top: -1em; left: -1em;
            width: .5em; height: .5em;
            box-shadow: 1.0em 1.25em 0 #F65314,
            1.6em 1.25em 0 #7CBB00,
            1.0em 1.85em 0 #00A1F1,
            1.6em 1.85em 0 #FFBB00;
        }

        .microsoft:after, .microsoft::after {
            z-index: 1;
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 2em; height: 2em;
            background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0));
        }

        /*搜索按钮 */
        #searchbtn:hover{
            color:#999;
            transform: scale(2.0);
            cursor:pointer;
        }
	</style>

</head>

<body>
    <div class="main-wrapper">
        <div th:include="headerfooter :: header"></div>

        <div class="breadcrumb-area bg-img" style="background-image:url(/assets/images/homepage/bid.jpg);">
            <div class="container">
                <div class="breadcrumb-content">
                    <h2 style="font-size: 80px;">竞价室</h2>
                </div>
            </div>
        </div>
        <div class="product-details-area pt-90 pb-90">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <div class="product-details-img">
                            <div class="zoompro-border zoompro-span">
                                <img id="largeIcon" class="zoompro" th:src="@{(${bidgood.url})}" style="height: 80%" th:data-zoom-image="@{(${bidgood.url})}" alt="" />
                            </div>
                        </div>
                        <h2></h2>
                    </div>
                    <div class="col-lg-8 col-md-6">
                        <div class="product-details-content pro-details-content-modify">
                            <!-- 喇叭  -->
                            <p class="microsoft marquee" id="loudspeaker"></p>
							<!-- 倒计时模块开始 -->
                            <span th:id="item-endtime" style="display: none">[[${bidgood.durationSeconds}]]</span>
                            <span id="gid" style="display: none">[[${bidgood.gid}]]</span>
                            <span>当前物品:[[${bidgood.title}]]</span>
                            <div class="time-item" style="margin-top: 0.625rem;">
                                <span>距结束：  </span>
                                <strong id="day_show">0天</strong>
								<strong id="hour_show">0时</strong>
								<strong id="minute_show">0分</strong>
								<strong id="second_show">0秒</strong>
							</div>
							<!--倒计时模块结束-->					
							<div style="background: #F8F8F8; margin: 20px 0px 20px 0px; font-size: 20px;">
								<div style="margin-top: 0.625rem; padding: 20px 0px 10px 50px;">
									<span style="font-size: 30px;">当前价：</span>
									<em style="font-size: 30px;">￥</em>
									<span id="bidprice" style="font-size: 30px;">[[${bidgood.nowPrice}]]</span>

								</div>
								<div style="margin-top: 0.625rem;padding-left: 3.125rem;">
									保证金<em>￥</em>
									<span>[[${bidgood.buyerBond}]]</span>
								</div>
								<div style="margin-top: 0.625rem;padding-left: 3.125rem;">
									<span>拍卖次数</span>
                                    <span id="bidnum"></span>
								</div>
								<div style="margin-top: 0.625rem;padding-left: 3.125rem;">
									<span>加价幅度</span>
									<span id="bidrange">[[${bidgood.rangePrice}]]</span>
								</div>
                                <div style="margin-top: 0.625rem;padding-left: 3.125rem;">
                                    <span>延时周期</span>
                                    <span id="bidrange">5分钟</span>
                                </div>
								<div class="row pro-details-buy-now btn-hover btn-hover-radious" style="margin-top: 0.9375rem;padding: 10px 0px 20px 50px;">
									<div class="col-lg-8">
										<input placeholder="请输入竞拍价格：" name=""  value="" id="amount" style="border:0; color:#f6931f; font-weight:bold;"/>
									</div>
									<div class="col-lg-4">
										<a href="javascript:void(0)" style="font-size: 20px;" onclick="doBid()">出价</a></button>
									</div>
								</div>
								<div id="slider-range-min" style="width: 80%;"></div>
							</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		
		<!-- 商品描述开始 -->
		<div class="section-title-2" style="text-align: center;">
			<h2>当前竞拍用户</h2>
		</div>			
		<div data-spy="scroll" data-target="#navbar-example" data-offset="0" 
			 style="height:200px;width:80%; overflow:auto; margin: 0 auto;" class="container">

			<table class="table table-bordered" style="width: 100%;height: 100%;">
			                            <thead align="center">
			                                <tr >
			                                    <td>状态</td>
			                                    <td class="width1" >竞拍人</td>
			                                    <td>价格</td>
			                                    <td>时间</td>
			                                </tr>
			                            </thead>
			                            <tbody id="bidRecord" align="center">

										</tbody>
			</table>
		</div>
		<!--  -->


        <!-- 尾部 -->
        <div th:include="headerfooter :: footer"></div>
           
        </div>
    </div>


    <!-- JS
============================================ -->
    <!--layui JS-->
    <script src="/assets/layui/layui.js"></script>
    <script src="/assets/js/pagination.js"></script>
    <!-- Modernizer JS -->
    <script src="/assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <!-- Modernizer JS -->
    <script src="/assets/js/vendor/jquery-3.3.1.min.js"></script>
    <!-- Popper JS -->
    <script src="/assets/js/vendor/popper.js"></script>
    <!-- Bootstrap JS -->
    <script src="/assets/js/vendor/bootstrap.min.js"></script>

    <!-- Slick Slider JS -->
    <script src="/assets/js/plugins/countdown.js"></script>
    <script src="/assets/js/plugins/counterup.js"></script>
    <script src="/assets/js/plugins/images-loaded.js"></script>
    <script src="/assets/js/plugins/isotope.js"></script>
    <script src="/assets/js/plugins/instafeed.js"></script>
    <script src="/assets/js/plugins/jquery-ui.js"></script>
    <script src="/assets/js/plugins/jquery-ui-touch-punch.js"></script>
    <script src="/assets/js/plugins/magnific-popup.js"></script>
    <script src="/assets/js/plugins/owl-carousel.js"></script>
    <script src="/assets/js/plugins/scrollup.js"></script>
    <script src="/assets/js/plugins/waypoints.js"></script>
    <script src="/assets/js/plugins/slick.js"></script>
    <script src="/assets/js/plugins/wow.js"></script>
    <script src="/assets/js/plugins/textillate.js"></script>
    <script src="/assets/js/plugins/elevatezoom.js"></script>
    <script src="/assets/js/plugins/sticky-sidebar.js"></script>
    <script src="/assets/js/plugins/smoothscroll.js"></script>
    <!-- Main JS -->
    <script src="/assets/js/main.js"></script>


    <!-- ============================================================================================ -->

    <script type="text/javascript">

        var intDiff = $("#item-endtime").html();
         //console.log("intdiff------>"+intDiff);
        function timer(){
            //var end = $(".item-close");
            //window.setInterval(function(){
            var day=0,
                hour=0,
                minute=0,
                second=0;//时间默认值
            if(intDiff > 0){
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                // console.log("=========="+second)
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('.time-item #day_show').html(day+"天");
            $('.time-item #hour_show').html('<s id="h"></s>'+hour+'时');
            $('.time-item #minute_show').html('<s></s>'+minute+'分');
            $('.time-item #second_show').html('<s></s>'+second+'秒');
            intDiff--;
            //}, 1000);
        }

        var tt =setInterval(timer,1000);
    </script>


    <!-- ============================================== -->
    <script>
        $(function () {
            bidroom();
        });

        var websocket = null;
        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            //建立商品的竞价室，连接，这里的/websocket ，是Servlet中注解中的那个值
            websocket = new WebSocket("ws://localhost:8080/websocket/"+$("#gid").html());
        }
        else {
            alert('抱歉！当前浏览器不支持WebSocket');
        }

        websocket.onerror = function () {
            console.log("WebSocket连接发生错误");
        };

        websocket.onopen = function () {
            console.log("WebSocket连接成功");
        };

        websocket.onmessage = function (event) {
            if(event.data=="200"){
                console.log("数据更新啦");
                bidroom();
            }
            if(event.data=="300"){
                console.log("延时啦");
                getDuratime();
            }
        };

        websocket.onclose = function () {
            console.log("WebSocket连接关闭");
        };

        //监听窗口关闭事件，当窗口关闭时，主动去关闭WebSocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closeWebSocket();
        };

        function closeWebSocket() {
            websocket.close();
        }

        /* 竞价室的竞价记录列表 */
        function bidroom() {
            $.get("/goodytj/bidlist/"+$("#gid").html(),null,function (data) {
                var content = "";
                var bidlist = data.bidlist;

                if(data.code==200){
                        for (var i=0; i<bidlist.length;i++) {
                            var bid = bidlist[i];
                            if(i==0){
                                content += '<tr>'
                                    + '<td class="width1">领先</td>'
                                    + '<td>匿名用户</td>'
                                    + '<td>'+ bid.bidPrice +'</td>'
                                    + '<td >'+bid.bidTime+'</td></tr>'
                            }else{
                                content += '<tr>'
                                    + '<td class="width1">落后</td>'
                                    + '<td>匿名用户</td>'
                                    + '<td>'+ bid.bidPrice +'</td>'
                                    + '<td >'+bid.bidTime+'</td></tr>'
                            }
                        }
                        $("#bidRecord").html(content);
                        $("#bidnum").html(bidlist.length);

                        var mostbid = bidlist[0];
                        $("#bidprice").html(mostbid.bidPrice);
                        $("#loudspeaker").html(mostbid.uid+"   在   "+mostbid.bidTime+"   以   "+mostbid.bidPrice+"元的竞拍价，拔得头筹，睥睨群雄！");
                        doPriceBar();

                }else if(data.code==300){
                    $("#loudspeaker").html("没人抢先，快来试试！！！");
                    doPriceBar();
                }else if(data.code==500){
                    // 弹出异常信息
                    alert(data.msg);
                }
            })
        }
        
        /* 竞拍动作 */
        function doBid() {
            var truthBeTold = window.confirm("确认竞拍？！");
            if(truthBeTold){
                var bidPrice = $("#amount").val();
                var price = $("#bidprice").html();
                var price2 = $("#bidrange").html();
                var oldPrice = parseInt(price)+parseInt(price2);
                // 前端验证
                if(bidPrice<oldPrice){
                    alert("手慢了，或者竞拍价格不合规则，请重新输入")
                }else{
                    $.ajax({
                        type: "post",
                        url: "/goodytj/bid",
                        data: {
                            uid: 1,
                            gid: $("#gid").html(),
                            bidPrice: bidPrice
                        },
                        dataType: "json",
                        success:function(data){
                            if(data.code==200){
                                alert(data.msg);
                            }else{
                                // 此时data.code==500
                                alert(data.msg);
                            }
                        }
                    })
                }
            }
        }

        /* 延时后，显示更改后的新过期时间 */
        function getDuratime() {
            $.get("/getDuration",{gid: $("#gid").html()},function (data) {
                window.intDiff = data;
            })
        }

        /* 竞价拖动条 */
        function doPriceBar() {
            var price = $("#bidprice").html();
            var price2 = $("#bidrange").html();
            var pp = parseInt(price)+parseInt(price2);
            console.log("----"+price);
            $( "#slider-range-min" ).slider({
                range: "min",
                min: pp,
                max: 2*pp,
                slide: function( event, ui ) {
                    $( "#amount" ).val( ui.value );
                }
            });
            $( "#amount" ).val( $( "#slider-range-min" ).slider( "value" ) );
        }

        /* s搜索框 */
        function searchgood(){
            var searchContext = $("#searchinput").val();
            window.location.href = "/goodlist?searchContext="+searchContext;
        }

    </script>


    <!-- ============================================== -->
    
    
    
    

    <!-- ============================================== -->
	
</body>

</html>